import React from 'react'
import { ArrowUpDown } from 'lucide-react'

interface SortOptionsProps {
  value: string
  onChange: (value: string) => void
}

const sortOptions = [
  { value: 'relevance', label: 'Relevance' },
  { value: 'newest', label: 'Newest First' },
  { value: 'oldest', label: 'Oldest First' },
  { value: 'citations', label: 'Most Cited' },
  { value: 'title', label: 'Title A-Z' }
]

export function SortOptions({ value, onChange }: SortOptionsProps) {
  return (
    <div className="flex items-center space-x-2">
      <ArrowUpDown className="h-4 w-4 text-gray-500" />
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="text-sm border-none bg-transparent text-gray-700 focus:ring-0 focus:outline-none cursor-pointer"
      >
        {sortOptions.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  )
}